<template>
  <view class="empty-state">
    <image 
      :src="image || '/static/icons/empty.png'" 
      class="empty-image"
      mode="aspectFit"
    />
    <text class="empty-title">{{ title || '暂无数据' }}</text>
    <text v-if="description" class="empty-description">{{ description }}</text>
    <custom-button 
      v-if="showButton"
      :text="buttonText || '去逛逛'"
      type="primary"
      size="small"
      @click="handleClick"
    />
  </view>
</template>

<script>
import CustomButton from '@/components/custom-button/index.vue'

export default {
  name: 'EmptyState',
  components: {
    CustomButton
  },
  props: {
    image: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    showButton: {
      type: Boolean,
      default: true
    },
    buttonText: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.empty-description {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
  line-height: 1.5;
}
</style>